<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .tou{
            width: 300px;
            height: 500px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .tou img{
            display: block;
            width: 300px;
            height: 300px;
        }
        #shu{
            text-align: center;
            
        }
       
    </style>
</head>
<body>
    <div class="tou">
        <img src="./练习/2.jpg" alt="">
        <p>纪梵希 &nbsp;小羊皮口红304</p>
        <h2>￥&nbsp;<span id="price">340</span></h2>
        <p>数量 &nbsp;<input type="button" value="-" id="jian" min="0">
                <input type="text" id="shu"  value="0">
                <input type="button" value="+" id="jia">
        </p>
        <p>总价￥：<span id="total"></span></p>


    </div>

    <script>
    jian.onclick =function(){
        if(shu.value>0){
        shu.value--
        total.innerHTML = price.innerHTML *1 * shu.value *1;
    }
    }
    jia.onclick =function(){
        
        shu.value++
        total.innerHTML=price.innerHTML*shu.value
    
   }
    
    </script>
</body>
</html>